<div class="clearfix">
<div class="col-xs-12 p-xs text-center animated fadeInRightBig">
<div class="row">
    <div class="col-xs-8">
        <div class="panel panel-default">
            <div class="panel-heading">空调实时数据</div>
            <div class="panel-body">
            <div style="height:500px" class="carbon_chart1"></div>
            </div>
        </div>
    </div> 
    <div class="col-xs-4">
        <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">空调实时数据</div>
            <div class="panel-body">
            <div style="height:150px" class="carbon_chart1"></div>
            </div>
        </div>
        </div>
        <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">空调实时数据</div>
            <div class="panel-body">
            <div style="height:250px" class="carbon_shot"></div>
            </div>
        </div>
        </div>
    </div>         
</div>
</div>
</div>


<script type="text/javascript">
        // 路径配置
        require.config({
          paths: {
            echarts: '/assets/echarts'
          }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载
            ],

            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                $(".carbon_chart1").each(function(){
                     var myChart = ec.init($(this).get(0));   
               //var myChart = ec.init(document.getElementById('air_w1'));   

                      var option = {
                            tooltip : {
                                trigger: 'axis'
                            },
                            /*toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },*/
                            calculable : true,
                            grid:{
                            y:20,
                            x2:50,
                            y2:20,
                            x:50
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : false,
                                    data : ['1','2','3','4','5','6','7','8','9','10','11','12']
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    axisLabel : {
                                        formatter: '{value} ml'
                                    }
                                },
                                {
                                    type : 'value',
                                    name : '温度',
                                    axisLabel : {
                                        formatter: '{value} °C'
                                    }
                                }
                            ],
                            series : [
                              {
                                    name:'平均温度',
                                    type:'line',
                                    smooth:false,
                                    yAxisIndex: 1,
                                    data:[1.0, 7.2, -3.3, 6.5, 2.3, -1.02, 0.203, -2.34, 0.230, -1.65, 1.20, -0.6]
                                },
                                 {
                                    name:'搜索引擎',
                                   smooth:true,
                                    type:'line',
                                    stack: '总量',
                                    itemStyle: {normal: {areaStyle: {type: 'default',color:'#ffb51b'}}},
                                    data:[120, 120, 120, 120, 120, 120, 120, 120, 120,200, 330, 1820]
                                },
                                {
                                    name:'邮件营销',
                                  smooth:true,
                                    type:'line',
                                    stack: '总量',
                                    itemStyle: {normal: {areaStyle: {type: 'default',color:'#32f6cc'}}},
                                    data:[620, 650, 420, 720, 420, 720, 420, 720, 320,500, 830, 1820]
                                }
                            ]
                            };
                      // 为echarts对象加载数据 
                myChart.setOption(option); 
                });

            }
        );

        
        require(
            [
            'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                // 基于准备好的dom，初始化echarts图表
                 $(".carbon_shot").each(function(){
                     var myChart = ec.init($(this).get(0));   
                // var myChart = ec.init(document.getElementById('load3')); 
                
                var labelTop = {
                    normal : {
                        label : {
                            show : true,
                            position : 'center',
                            formatter : '{b}',
                            textStyle: {
                                baseline : 'bottom'
                            }
                        },
                        labelLine : {
                            show : false
                        }
                    }
                };
                var labelFromatter = {
                    normal : {
                        label : {
                            formatter : function (params){
                                return 100 - params.value + '%'
                            },
                            textStyle: {
                                baseline : 'top'
                            }
                        }
                    },
                }
                var labelBottom = {
                    normal : {
                        color: '#ccc',
                        label : {
                            show : true,
                            position : 'center'
                        },
                        labelLine : {
                            show : false
                        }
                    },
                    emphasis: {
                        color: 'rgba(0,0,0,0)'
                    }
                };
                var radius = [45, 50];
                var  option = {

                    series : [
                    {
                        type : 'pie',
                        center : ['15%', '25%'],
                        radius : radius,
            x: '30%', // for funnel
            itemStyle : labelFromatter,
            data : [
            {name:'other', value:70, itemStyle : labelBottom},
            {name:'A相电压', value:30,itemStyle : labelTop}
            ]
          },
          {
            type : 'pie',
            center : ['50%', '25%'],
            radius : radius,
            x:'50%', // for funnel
            itemStyle : labelFromatter,
            data : [
            {name:'other', value:70, itemStyle : labelBottom},
            {name:'B相电压', value:30,itemStyle : labelTop}
            ]
          },
          {
            type : 'pie',
            center : ['85%','25%'],
            radius : radius,
            x:'70%', // for funnel
            itemStyle : labelFromatter,
            data : [
            {name:'other', value:70, itemStyle : labelBottom},
            {name:'C相电压', value:30,itemStyle : labelTop}
            ]
          },
          {
            type : 'pie',
            center : ['15%', '70%'],
            radius : radius,
            x:'30%', // for funnel
            itemStyle : labelFromatter,
            data : [
            {name:'other', value:70, itemStyle : labelBottom},
            {name:'A相电压', value:30,itemStyle : labelTop}
            ]
          },
          {
            type : 'pie',
            center : ['50%', '70%'],
            radius : radius,
            x:'50%', // for funnel
            itemStyle : labelFromatter,
            data : [
            {name:'other', value:70, itemStyle : labelBottom},
            {name:'B相电压', value:30,itemStyle : labelTop}
            ]
          },
          {
            type : 'pie',
            center : ['85%', '70%'],
            radius : radius,
            x:'70%', // for funnel
            itemStyle : labelFromatter,
            data : [
            {name:'other', value:70, itemStyle : labelBottom},
            {name:'C相电压', value:30,itemStyle : labelTop}
            ]
          },
          ]
        };
                // 为echarts对象加载数据 
               myChart.setOption(option); 
              });
            }
          );
</script>